@font-face {
font-family: 'miniFont';
src: url('minijiankatong.eot');
src: url('minijiankatong.eot?#iefix') format('embedded-opentype'),
     url('minijiankatong.woff') format('woff'),
     url('minijiankatong.ttf') format('truetype'),
     url('minijiankatong.svg#minijiankatong') format('svg');
    font-weight: normal;
    font-style: normal;
   }
.btn-group{
	width:72%;
	margin: a auto;
	height:15.5%;
    position: absolute;
    bottom:2.5%;
    left:16.5%;
}
.btn-group a {
	display: inline-block;
	height:100%;
	width: 50%;
}
.btn-join{
	background: url(../img/btn_join.png) no-repeat left center;
	background-size: contain;
	float: left;
}
.btn-rules{
	background: url(../img/btn_rules.png) no-repeat right center;
	background-size: contain;
	float: left;
}
/*活动规则*/
.rule_con{
	position: fixed;
	left: 100%;
	top: 0px;
	width: 100%;
	height: 100%;
	background: url(../img/rule_bg.jpg) no-repeat;
	background-size: 100% 100%;
	background-attachment: fixed;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	transition:left .5s;
	-webkit-transition: left .5s;
	-moz-transition:left .5s;
	-o-transition:left .5s;
}
.rule_con.open{
	left:0;
}
.rule_body{
	padding: 20px;
	overflow-y: scroll;
	line-height: 180%;
	-webkit-overflow-scrolling: touch;
	height:60%;
}
.rule_body h2{
	color: #cc0000;
	text-align: left;
	margin-bottom:.5rem;
}
.rule_body p{
	font-size: 1.2rem;
	text-align: justify;
}
.rule_body em{
	font-weight: bold;
}
.rule_con .other{
	position: absolute;
	bottom:16%;
	right: 5%;
	width:55%;
}
.rule_con .other em{
	font-weight: bold;
	float:left;
}
.rule_con .other div{
	overflow: hidden;
}
/*join页面*/
.run_con{
	position: fixed;
	bottom: 0;
	height: 100%;
	width:100%;
	background-image: url(../img/run_bg.jpg);
	background-repeat:repeat-x;
	background-size: cover;
}
.run_con.run{
	-webkit-transition:background-position 28s linear;
}
.run_con img{
	height:100%;
}
.progress{
	position: fixed;
	width:100%;
	top:3%;
	line-height: 160%;
	color:#fff;
	font-weight:bold;
	font-size:1.8rem;
	text-shadow:2px 0px 1px #000,-2px 0px 1px #000, 0px 2px 1px #000,0px -2px 1px #000;
	font-family: miniFont;
	
}
.progress .time, .progress .length{
	font-family: arial;
	font-size:2rem;
	margin-right: .5rem;
}
.progress > div{
	margin-left:5%;
	
}
.progress .progress_Bar{
	width:40%;
	height:16px;
	display: inline-block;
	background-color: #000;
	border-radius: 4px;
	-webkit-box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.5), inset 0px 0px 1px 1px rgba(0, 0, 0, 0.8), 0px 0px 1px #000, 0px 0px 0px 2px #fff, 0px 0px 2px 2px #000;
	margin-right:10px;
	box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.5), inset 0px 0px 1px 1px rgba(0, 0, 0, 0.8), 0px 0px 1px #000, 0px 0px 0px 2px #fff, 0px 0px 2px 2px #000;
	padding:1px;
}
.progress .progress_percent{
	display: block;
	width:100%;
	height:16px;
	border-radius:2px;
	background-image: -moz-linear-gradient( 90deg, #e9372d 0%, #f53f4d 50%, #ffaac3 70%, #fe8daf 100%);
	background-image: -webkit-linear-gradient( 90deg, #e9372d 0%, #f53f4d 50%, #ffaac3 70%, #fe8daf 100%);
	background-image: -ms-linear-gradient( 90deg, #e9372d 0%, #f53f4d 50%, #ffaac3 70%, #fe8daf 100%);
	transition: width 1s linear;
	-webkit-transition:width 1s linear;
	-moz-transition:width 1s linear;
	-ms-transition:width 1s linear;
}

.running_person{
	position:fixed;
	width:32%;
	bottom:16%;
	left:5%;
	background: url(../img/running_person.png) no-repeat;
	background-size:100% auto;
}
.running_person:before{
	content:"";
	display: inline-block;
	padding-top:92.6%;
}

.running_handler{
	position: fixed;
	bottom:-8%;
	height:26%;
	width:34%;
	left:30%;
	background: url(../img/running_btn.png) no-repeat;
	background-position-y: center;
	background-size: 100% auto;
}
.running_tips{
	position: fixed;
	bottom:0;
	height:26%;
	width:34%;
	left:62%;
	background: url(../img/run-tips.png) no-repeat;
	background-position-y: center;
	background-size: 100% auto;
}
/*结果*/
.cover{
	height:100%;
	widt:100%;
	background-color: rgba(0,0,0,0.8);
}
.top_bg{
	height: 74%;
	width:100%;
	background: url(../img/result.png) no-repeat;
	background-size: 100% 100%;
}


.mask{
	position:fixed;
	width:100%;
	height:100%;
	background-color: rgba(0,0,0,0.8);
	text-align: center;
	color:rgba(255,255,255,0.8);
	font-size:2.6rem;
	font-family:arial;
	line-height: 160%;
}
.mask p{
	padding-top:30%;
	font-size:3rem;
}
.mask .countdown{
	font-size: 7rem;
	font-weight: bold;
  line-height: 160%;
}
.result{
	
position:absolute;
width:100%;
height:100%;
background:url(../img/result.png) no-repeat;
background-size:100% auto;
z-index:1;
}
.result_length{
	margin-top:27%;
}
.result_length, .result_top{
	font-family: miniFont;
	/*-webkit-text-stroke: 1px #000000;*/
	text-shadow: 2px 2px 1px #000,-2px -2px 1px #000,2px -2px 1px #000,-2px 2px 1px #000,0px -2px 1px #000,0px 2px 1px #000,-2px 0px 1px #000,2px 0px 1px #000;
	color:#fff;
	font-weight: bold;
	line-height:200%;
}
.result .jp{
	font-size:1.2rem;
	color:#000;
	line-height: 120%;
	width:80%;
	margin-left:14%;
}
.result .sm{
	font-size:.9rem;
	color:#d34034;
	line-height: 120%;
	width:68%;
	margin-left:24%;
}
.result .jp em{font-weight: bold;}
.special{
	color:#d34034;
}
.special label{
	font-family:"arial black";
	margin-left:2px;
	margin-right:2px;
	font-size:2.2rem;
}
.result_additional em{
	font-style: normal;
	color: #d34034;
}
.result_length{
	font-size:1.4rem;
}
.result_top{
	font-size:1.8rem;
}
.result_additional{
	color:#000000;
	font-size:.9rem;
	line-height:140%;
	margin-top:10px;
}
.result_prompt{
	color:#d94436;
	font-size:.8rem;
	font-weight: bold;
	border-top:1px solid #000;
	margin-top:10px;
	
}
@media only screen and (max-width: 320px) and (max-height: 480px) {
	.running_handler{
		height:30%;
		width:35%;
}
}
.realy_button{
	position: absolute;
	z-index: 2;
	left:0;
	top:0;
	width:62%;
	margin-top:102%;
	    margin-left: 19%;
    margin-right: 19%;
    padding-bottom:2rem;
}
#checkTop, #rule{
	width:44%;
	display: inline-block;
	    line-height: 240%;
	        font-size: 1.4rem;
}
#checkTop{
	float: left;
}
#rule{
	float:right;
}
#again_btn{
	width: 100%;
    margin-bottom: 40px;
    margin-top: 40px;
        line-height: 240%;
            font-size: 1.4rem;
            display: inline-block;
}
.button_con{
	margin-left:19%;
	margin-right:19%;
	margin-top:102%;
}
.button_con .red_btn{
	width:100%;
	margin-bottom:40px;
	margin-top:40px;
}
.button_con .lemon_btn{
	width:44%;
	float:left;
}
.button_con .lemon_btn:last-child{
	float:right;
}
.red_btn,
.lemon_btn {
	display:inline-block;
	border-radius: 8px;
	line-height: 240%;
	text-align: center;
	color: #fff;
	text-decoration: none;
	text-shadow: -1px 0px 1px #000, 0px -1px 1px #000, 1px 0px 1px #000, 0px 1px 1px #000, 1px 1px 1px #000, -1px -1px 1px #000;
	font-size: 1.4rem;
	-webkit-text-fill-color: #ffffff;
	-webkit-box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.5), inset 0px 0px 1px 1px rgba(0, 0, 0, 0.8), 0px 0px 1px #000, 0px 0px 0px 2px #fff, 0px 0px 2px 2px #000;
	font-family: "黑体";
}
.lemon_btn {
	background-image: -moz-linear-gradient( 90deg, #fde879 0%, #fbffb7 100%);
	background-image: -webkit-linear-gradient( 90deg, #fde879 0%, #fbffb7 100%);
	background-image: -ms-linear-gradient( 90deg, #fde879 0%, #fbffb7 100%);
}
.red_btn {
	background-image: -moz-linear-gradient( 90deg, #c54132 0%, #e5644c 100%);
	background-image: -webkit-linear-gradient( 90deg, #c54132 0%, #e5644c 100%);
	background-image: -ms-linear-gradient(90deg, #c54132 0%, #e5644c 100%);
}
.popInfo{
	position: fixed;
	left:100%;
	top:0px;
	width:100%;
	height:100%;
	overflow: hidden;
		transition:left .5s;
	-webkit-transition: left .5s;
	-moz-transition:left .5s;
	-o-transition:left .5s;
}
.popInfo.open{
	left:0px;
}
.popInfo .popInfo_content{
	display:-webkit-box;
	width:100%;
	height:100%;
	-webkit-box-pack: center;
	}
.popInfo_content > div{
	-webkit-flex: 1;
	margin:5%;
	background-color:#faed85;
	padding:5%;
	border:4px solid #d59961;
	border-radius: 6px;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	width:80%;
	min-height:80%;
}
.popInfo_content table {
	width:100%;
	font-size:1rem;
	color:#000;
	border-collapse: collapse;
	
}
.popInfo_content table td, .popInfo_content table th{
	vertical-align: middle;
	text-align: left;
	border-bottom:1px solid #000;
	line-height: 100%;
	padding-top: 4px;
	padding-bottom: 4px;	
}
.popInfo_content table td:last-child, .popInfo_content table th:last-child{
	text-align: right;
}

.popInfo_content table img{
	width: 30px;
	height:30px;
	border-radius: 15px;
	vertical-align: middle;
}
.popInfo_content table  span{
	font-family: arial;
	font-size:1.2rem;
	font-weight: bold;
	margin-right:10px;
	vertical-align: middle;
	display: inline-block;
	width:40px;
	text-align: right;
}
#share{
	text-align: right;
}
#share img{
	max-width:90%;
	max-height:90%;
}




@media only screen and (max-width: 320px) {
	.result_length{
		line-height: 120%;
	}
}



























































